import Base from "../base.js";
// import usersApi from '../../api/userList.js';
import usersApi from "../../api/users.js";
export default class extends Base {
  data = {
    curPage: 1,
    eachPage: 10, //每页显示条数
    total: 0,
    maxPage: 0, //总页数
    rows: [], //当先页数据
  };
  render() {
    // 渲染电影表格
    this.$el.html(`
    <h1 style="text-align:center">网站用户</h1>
        <div>
        <table  class="layui-table" lay-size="sm" id="tableList">
            <thead>
                <tr>
                    <th>id</th>
                    <th>用户名</th>
                    <th>密码</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody class="users-list"></body>
        </table>
            <div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                    <label class="layui-form-label">页数</label>
                    <div class="layui-input-inline">
                        <select name="quiz" class="curPage">

                        </select>
                    </div>
                </div>
                    共<span class="tatol"></span>条
                    当前：<input  type="text" name="eachPage" value="${this.data.eachPage}">
                    <button class="first-btn layui-btn layui-btn">首页</button>
                    <button class="prve-btn layui-btn layui-btn">上一页</button>
                    <button class="next-btn layui-btn layui-btn">下一页</button>
                    <button class="last-btn layui-btn layui-btn">末页</button>
                
            </div>
        </div>
        `);

    this.$userslist = $(".users-list"); // 表格渲染挂载区域
    this.$curpageEle = $(".curPage"); //总页数
    this.$tatolEle = $(".tatol"); //数据总数
    this.$eachPage = $("input[name=eachPage]"); //当前页
    this.$fristBtn = $(".first-btn"); //首页
    this.$prveBtn = $(".prve-btn"); //上一页
    this.$nextBtn = $(".next-btn"); //下一页
    this.$lastBtn = $(".last-btn"); //尾页
    this.$tableList = $("#tableList");
  }

  //渲染电影列表
  rerender() {
    const str = this.data.rows
      .map((item, index) => {
        return `<tr>
                <td>${item._id}</td>
                <td>${item.usersname}</td>
                <td>${item.password}</td>
                <td>
                <button class="layui-btn layui-btn-danger layui-btn-xs" id="${item._id}" name="delBtn" value="${index}"><i class="layui-icon"></i>删除</button>
                </td>
              </tr>`;
      })
      .join("");
    this.$userslist.html(str);
    this.$tatolEle.html(this.data.total);
    let options = "";
    for (let i = 1; i <= this.data.maxPage; i++) {
      options += `<option value="${i}">${i}</option>`;
    }
    //    更新按钮
    this.$curpageEle.html(options).val(this.data.curPage);
  }



  //获取用户信息
  async getusers() {
    const { curPage, eachPage } = this.data;
    // console.log({ curPage, eachPage });
    // const data = await usersApi.get({ curPage, eachPage });
    const data = await usersApi.getAllUsers();
    const realUser = data.slice(2, 6);
    // console.log(realUser);
    this.data.rows = realUser;
    // console.log(data);
    // Object.assign(this.data, data)
    // console.log(this.data);
    this.rerender();
  }


  
  // 获取数据
  mounted() {
    this.getusers();
  }
  //首页
  first() {
    if (this.data.curPage === 1) return;
    this.data.curPage = 1;
    this.getusers();
  }
  // 末页
  last() {
    if (this.data.curPage === this.data.maxPage) return;
    this.data.curPage = this.data.maxPage;
    this.getusers();
  }
  // 上一页
  prveHandle() {
    if (this.data.curPage === 1) return;
    this.data.curPage--;
    this.getusers();
  }
  // 下一页
  nextHandle() {
    if (this.data.curPage === this.data.maxPage) return;
    this.data.curPage++;
    this.getusers();
  }
  //    当前页
  setEachePageHandle(e) {
    this.data.eachPage = ~~e.target.value;
    this.getusers();
  }
  // 删除更新
  async removeHandle(e) {
    if ($(e.target).attr("name") == "delBtn") {
      if (confirm("确定要删除吗!")) {
        const _id = $(e.target).attr("id");
        await usersApi.remove({ _id });
        this.getusers();
      } else {
      }
    }
  }
  // 搜索
  handle() {
    // 首页绑定点击事件
    this.$fristBtn.on("click", this.first.bind(this));
    // 末页绑定点击事件
    this.$lastBtn.on("click", this.last.bind(this));
    // 上一页绑定点击事件
    this.$prveBtn.on("click", this.prveHandle.bind(this));
    // 下一页绑定点击事件
    this.$nextBtn.on("click", this.nextHandle.bind(this));
    // 绑定失去焦点事件
    this.$eachPage.on("blur", this.setEachePageHandle.bind(this));
    // this.$updateBtnEle.on("click",this.nextHandle.bind(this));
    // 删除数据
    this.$tableList.on("click", this.removeHandle.bind(this));
  }
}
